<template>
  <view class="detail-container">
    <go-back></go-back>

    <scroll-view class="content-scroll" scroll-y>
      <!-- 标题和头部信息 -->
      <view class="article-header">
        <view class="header-top">
          <view class="author-info">
            <image
              class="author-avatar"
              :src="articleDetail.user_avatar"
              mode="aspectFill"
            ></image>
            <text class="author-name">{{ articleDetail.user_nickname }}</text>
          </view>
        </view>

        <text class="article-title">{{ articleDetail.article_title }}</text>
      </view>

      <!-- 图片轮播 -->
      <swiper
        class="image-swiper"
        circular
        indicator-dots
        indicator-active-color="#00879e"
      >
        <swiper-item
          v-for="(image, index) in images"
          :key="index"
          class="swiper-item"
        >
          <image
            :src="image"
            mode="aspectFill"
            class="swiper-image"
            @click="previewImage(index)"
          ></image>
        </swiper-item>
      </swiper>

      <!-- 文章内容 -->
      <view class="article-content">
        <text class="content-text">{{ articleDetail.article_content }}</text>
        <!-- 添加标签栏 -->
        <view class="article-tags">
          <text class="tag-item">{{ categoryName }}</text>
        </view>
        <!-- 显示格式化后的时间 -->
        <text class="publish-time">{{ formattedCreateTime }}</text>
        <!-- 点赞按钮 -->
        <view class="like-button-container">
          <view
            class="like-button"
            :class="{ liked: isLiked }"
            @click="toggleLike"
          >
            <text class="like-icon">♡</text>
            <text class="like-count">{{ articleDetail.article_likes }}</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
  import { ref } from "vue";
  import moment from "moment";
  import { getArticleDetail, like, getCategory } from "../../api/campus";
  import { onLoad } from "@dcloudio/uni-app";

  // 文章ID
  const article_id = ref(0);
  // 文章详情数据
  const articleDetail = ref({});
  const categoryList = ref([]);
  const categoryName = ref("");

  // 模拟数据
  const images = ref([]);

  const content = ref();

  // 点赞相关
  const isLiked = ref(false);
  const likeCount = ref(0);

  // 格式化后的发布时间
  const formattedCreateTime = ref("");

  // 获取分类列表
  const getCategoryList = async () => {
    const res = await getCategory();
    categoryList.value = res.data;
  };

  const getArticleDetails = async (id) => {
    const res = await getArticleDetail(id);
    console.log("文章详情数据:", res);
    articleDetail.value = res.data;

    // 根据category_id获取分类名称
    const category = categoryList.value.find(
      (item) => item.category_id === res.data.category_id
    );
    categoryName.value = category ? category.category_name : "未分类";

    // 更新页面数据
    content.value = articleDetail.value.article_content;
    likeCount.value = articleDetail.value.article_likes;
    // 更新点赞状态
    isLiked.value = articleDetail.value.likeStatus == "1" ? true : false;

    // 处理图片数据
    if (articleDetail.value.article_images) {
      try {
        const imageArray = JSON.parse(articleDetail.value.article_images);
        if (Array.isArray(imageArray) && imageArray.length > 0) {
          images.value = imageArray;
        }
      } catch (error) {
        console.error("解析图片数据失败:", error);
      }
    }

    // 格式化发布时间
    formattedCreateTime.value = moment(articleDetail.value.update_time).format(
      "YYYY-MM-DD"
    );
  };

  onLoad((options) => {
    console.log("页面参数:", options);
    if (options && options.article_id) {
      article_id.value = options.article_id;
      getCategoryList().then(() => {
        getArticleDetails(article_id.value);
      });
    }
  });

  const toggleLike = async () => {
    const res = await like(article_id.value);
    console.log(res.data);

    if (res.code === 200) {
      articleDetail.value.article_likes = res.data.likeCounts;
      isLiked.value = res.data.likeStatus == "1" ? true : false;
    }
  };

  // 返回上一页
  const goBack = () => {
    uni.navigateBack();
  };

  // 图片预览
  const previewImage = (index) => {
    uni.previewImage({
      current: index,
      urls: images.value,
    });
  };
</script>

<style lang="scss">
  .detail-container {
    min-height: 100vh;
    background-color: #ffffff;
    position: relative;

    .content-scroll {
      height: 100vh;
    }

    .article-header {
      padding: 40rpx;
      background-color: #fff;
      position: sticky;
      top: 40rpx;
      z-index: 10;

      .header-top {
        display: flex;
        align-items: center;
        margin-bottom: 30rpx;

        .back-button {
          margin-right: 20rpx;
        }

        .author-info {
          display: flex;
          align-items: center;
          flex: 1;
          gap: 16rpx;

          .author-avatar {
            margin-left: 80rpx;
            width: 80rpx;
            height: 80rpx;
            border-radius: 50%;
            box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.3);
          }

          .author-name {
            font-size: 28rpx;
            font-weight: 600;
            color: #333;
          }
        }
      }

      .article-title {
        font-size: 44rpx;
        font-weight: 700;
        color: #333;
        line-height: 1.4;
        display: block;
        margin-top: 20rpx;
      }
    }

    .image-swiper {
      width: 100%;
      height: 500rpx;
      margin-bottom: 30rpx;

      .swiper-item {
        width: 100%;
        height: 100%;
        padding: 0 20rpx;
        box-sizing: border-box;

        .swiper-image {
          width: 100%;
          height: 100%;
          border-radius: 20rpx;
          box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
        }
      }
    }

    .article-content {
      padding: 40rpx;
      margin-bottom: 40rpx;
      position: relative;

      .content-text {
        font-size: 34rpx;
        color: #333;
        line-height: 1.8;
        text-align: justify;
        margin-bottom: 60rpx;
        display: block;
      }

      .publish-time {
        position: absolute;
        right: 40rpx;
        bottom: 140rpx;
        font-size: 24rpx;
        color: #999;
        background-color: #f5f5f5;
        padding: 8rpx 16rpx;
        border-radius: 16rpx;
      }

      .like-button-container {
        display: flex;
        justify-content: center;
        margin-top: 60rpx;

        .like-button {
          width: 180rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 12rpx;
          height: 80rpx;
          border-radius: 40rpx;
          transition: all 0.3s ease;
          background-color: #f5f5f5;
          color: #666;
          box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

          .like-icon {
            font-size: 36rpx;
          }

          .like-count {
            font-size: 28rpx;
            font-weight: 500;
          }

          &.liked {
            background-color: #ffe4e6;
            color: #ff4757;
            box-shadow: 0 4rpx 12rpx rgba(255, 71, 87, 0.2);

            .like-icon {
              animation: heartBeat 0.3s ease;
            }
          }

          &:active {
            transform: scale(0.95);
          }
        }
      }
    }
  }

  @keyframes heartBeat {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.2);
    }
    100% {
      transform: scale(1);
    }
  }

  /* 在 .article-header 样式内添加 */
  .article-tags {
    display: flex;
    gap: 16rpx;
    margin-bottom: 30rpx;

    .tag-item {
      font-size: 24rpx;
      color: #00879e;
      background-color: rgba(0, 135, 158, 0.1);
      padding: 8rpx 20rpx;
      border-radius: 20rpx;
      font-weight: 500;
    }
  }

  .like-button-container {
    display: flex;
    justify-content: center;
    margin-top: 60rpx;

    .like-button {
      width: 180rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12rpx;
      height: 80rpx;
      border-radius: 40rpx;
      transition: all 0.3s ease;
      background-color: #ffe4e6;
      color: #ff4757;
      box-shadow: 0 4rpx 12rpx rgba(255, 71, 87, 0.2);

      .like-icon {
        font-size: 36rpx;
      }

      .like-count {
        font-size: 28rpx;
        font-weight: 500;
      }

      &.liked {
        background-color: #ff4757;
        color: #ffffff;
        box-shadow: 0 4rpx 12rpx rgba(255, 71, 87, 0.3);

        .like-icon {
          animation: heartBeat 0.3s ease;
        }
      }

      &:active {
        transform: scale(0.95);
      }
    }
  }
</style>
